<script setup lang="ts">
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next';
import 'vue-waterfall-plugin-next/dist/style.css';
//import { ajax } from '@/api'
import { ref, nextTick } from 'vue';
import { NSpin, NEmpty, NImage, NTag } from 'naive-ui';
//import {copyText3} from "@/utils/format";
//import { copyText } from 'vue3-clipboard'
//import { copyToClip } from "@/utils/copy";
//import AiMsg from "@/views/aidutu/aiMsg.vue";
import { homeStore, useChatStore } from '@/store';
import { useBasicLayout } from '@/hooks/useBasicLayout';
//import { ViewCard } from 'vue-waterfall-plugin-next/dist/types/types/waterfall'
import { getMjAll, localGet, mlog, loadGallery, url2base64 } from '@/api';
import ImageLoader from '@/components/common/ImageLoader.vue';

const chatStore = useChatStore();

const { isMobile } = useBasicLayout();

const emit = defineEmits(['close']);
//import {hom}

const st = ref({ show: true, showImg: '', isLoad: false });

const showImg = ref<typeof NImage>();

const list = ref<any[]>([]);

const breakpoints = {
  2000: {
    //当屏幕宽度小于等于1200
    rowPerView: 6
  },
  1600: {
    //当屏幕宽度小于等于1200
    rowPerView: 5
  },
  1200: {
    //当屏幕宽度小于等于1200
    rowPerView: 4
  },
  800: {
    //当屏幕宽度小于等于800
    rowPerView: 3
  },
  500: {
    //当屏幕宽度小于等于500
    rowPerView: 2
  }
};

const loadImg = () => {
  //mlog('local',homeStore.myData.session.isApiGallery );
  if (homeStore.myData.session.isApiGallery) loadApiGallery();
  else loadImagFormLocal();
};

const loadApiGallery = async () => {
  st.value.isLoad = true;
  let d = await loadGallery();
  mlog('loadApiGallery', d);
  st.value.isLoad = false;
  if (!d || d.length == 0) return;
  let rz = d.map((v: any) => {
    return {
      mjID: v.id,
      src: v.imageUrl,
      isLoad: 0,
      prompt: v.prompt,
      image_url: v.imageUrl,
      action: v.action,
      time: v.startTime
    };
  });
  for (let i in rz) {
    let v = rz[i];
    try {
      if (v.image_url) {
        //await loadImg(chat.value.opt?.imageUrl);
        let key = 'img:' + v.mjID;
        let base64 = await localGet(key);
        if (!base64) {
          url2base64(v.image_url, key).then((v: any) => {
            mlog('图片已保存>>', key);
          });
        } else {
          rz[i].image_url = rz[i].src = base64;
        }
      }
    } catch (error) {
      mlog('图片保存失败', error);
    }
  }

  list.value = rz.sort((a: any, b: any) => b.time - a.time);
};

const loadImagFormLocal = async () => {
  let d = await getMjAll(chatStore.$state);
  if (!d || d.length == 0) return;
  //mlog('loadImg', d );

  let rz = d
    .filter((v: any) => v.opt && v.opt.imageUrl)
    .map((v: any) => {
      //mlog('vv', v.opt.imageUrl);
      // let key= 'img:'+v.mjID;
      //  let base64 = await loca(key );
      return {
        mjID: v.mjID,
        src: v.opt.imageUrl,
        isLoad: 0,
        prompt: v.opt.promptEn,
        image_url: v.opt.imageUrl,
        action: v.opt.action,
        time: v.opt.startTime
      };
    });
  list.value = [];
  for (let v of rz) {
    let key = 'img:' + v.mjID;
    try {
      let base64 = await localGet(key);
      if (base64) v.image_url = base64;
    } catch (e) {}
    list.value.push(v);
  }

  // list.value

  // ajax({  url: '/chatgpt/mj/gallery' })
  //     .then((d) => {
  //         // st.value.style= d.data.style
  //         // st.value.example= d.data.example
  //         console.log(d)
  //         list.value= d.data.images.map((v:any)=>{
  //             v.isLoad=0
  //             return  v;
  //         })
  //     } )
};
const goShow = (item: any) => {
  //console.log('goShow', isMobile );
  if (isMobile.value) return;
  st.value.show = true;
  st.value.showImg = item.image_url;
  //console.log('goShow', item);
  nextTick(() => showImg.value?.click());
};
// function copy( item:any){
//   //console.log('copy', item.prompt );
// 	//copyText3(  item.prompt ).then(()=>msgRef.value.showMsg('复制成功！'));
//   homeStore.setMyData({act:'copy',actData: {text: item.prompt } });
// 	//copyToClip(  item.prompt ).then(()=>msgRef.value.showMsg('复制成功！'));
// }

//画同款
const same = (item: any, act: string) => {
  //console.log('same',item);
  homeStore.setMyData({ act, actData: JSON.parse(JSON.stringify(item)) }); //:'same'
  emit('close');
};
loadImg();
</script>
<template>
  <Waterfall :list="list" :breakpoints="breakpoints" class="!bg-transparent" v-if="list.length">
    <template #item="{ item, url, index }">
      <div class="bg-white dark:bg-[#24272e] rounded-md overflow-hidden cursor-pointer group/item relative">
        <ImageLoader :url="item.image_url" @success="item.isLoad = 1" @click="goShow(item)" />
        <!-- <LazyImg :url="item.image_hd_url"  @success="item.isLoad=1" /> -->
        <div class="absolute top-0 left-0 right-0 bottom-0" v-if="item.isLoad == 0">
          <div class="flex justify-center items-center w-full h-full">
            <n-spin size="large" />
          </div>
        </div>
        <div class="absolute w-full bottom-0 backdrop-blur-sm text-white/70 invisible group-hover/item:visible">
          <div class="p-3">
            <div class="line-clamp-2 text-[13px]">
              <template v-if="item.prompt">{{ item.prompt }}</template>
              <NTag v-else-if="item.action == 'SWAP_FACE'" type="success" size="small" round v-html="$t('mjchat.face')"></NTag>
              <NTag v-else-if="item.action == 'BLEND'" type="success" size="small" round v-html="$t('mjchat.blend')"></NTag>
              <NTag v-else type="success" size="small" round>{{ item.action }}</NTag>
            </div>
            <div class="line-clamp-1 text-[12px] text-right">{{ new Date(item.time).toLocaleString() }}</div>
            <div class="space-x-2">
              <!-- <NButton type="primary" size="small" @click="copy(item )" >复制</NButton> -->

              <!-- <NButton type="primary" size="small" @click="same(item,'same2' )" >引用</NButton>
                <NButton type="primary" size="small"  @click="same(item,'same' )">画同款</NButton> -->
            </div>
          </div>
        </div>
        <!-- <p class="text">这是具体内容</p> -->
      </div>
    </template>
  </Waterfall>
  <div v-else-if="st.isLoad" class="w-full h-full flex justify-center items-center">
    <n-spin size="large" />
    <div>Loading....</div>
  </div>
  <div v-else class="w-full h-full flex justify-center items-center">
    <n-empty :description="$t('mjchat.noproduct')" />
  </div>

  <NImage :src="st.showImg" ref="showImg" v-if="st.showImg" :width="1" />
  <!-- <NButton type="primary" size="small" @click="copy2('abdd' )" >复制</NButton> -->

  <!-- <div @click="copy2('abdd' )">复制测试</div> -->
</template>

<style>
.lazy__img[lazy='loading'] {
  padding: 5em 0;
  width: 48px;
}

.lazy__img[lazy='loaded'] {
  width: 100%;
}

.lazy__img[lazy='error'] {
  padding: 5em 0;
  width: 48px;
}
</style>